<template>
    <div class="health-monitoring-container">
      <van-nav-bar
        title="健康监测"
        left-arrow
        @click-left="goBack"
      />
      <van-card
        class="user-info-card"
        :title="counterStore.useStore.userName"
        :thumb="userInfo.thumb"
        :desc="counterStore.useStore.sex+'  '+counterStore.useStore.age + '岁' "
        style="background-color: #f3fff2;"
      />
      
      <van-cell-group>
        <van-cell
          v-for="(monitor, index) in monitors"
          :key="index"
          :title="monitor.title"
          :value="monitor.value"
          :right-icon="monitor.icon"
          :border="false"
        >
          <template #extra>
            <span>{{ monitor.time }}</span>
            <span v-if="monitor.status" :class="`status-tag ${monitor.status}`">{{ monitor.statusText }}</span>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  import { useCounterStore } from '@/stores/counter';
  const counterStore = useCounterStore();
  const userInfo = ref({
    name: '王谢',
    thumb: 'https://cdn8.axureshop.com/demo2024/2284485/images/%E7%AD%BE%E7%BA%A6%E4%BF%A1%E6%81%AF/u6585.png', // 这里用一个示例图标链接，你可替换
    age: 28
  });
  
  const monitors = ref([
    {
      title: 'BMI',
      value: '26.5 身高168 cm 体重69.2 kg',
      icon: 'https://cdn8.axureshop.com/demo2024/2284485/images/%E5%81%A5%E5%BA%B7%E7%9B%91%E6%B5%8B/u6720.png', // 示例图标链接
      time: '2022-05-21 10:20',
      status: null
    },
    {
      title: '血糖',
      value: '9.6mmol/L',
      icon: 'https://img.icons8.com/fluency/48/000000/medical-drop--v1.png',
      time: '2022-05-21 10:20',
      status: 'danger',
      statusText: '偏高'
    },
    {
      title: '血压',
      value: '120/80mmHg',
      icon: 'https://cdn8.axureshop.com/demo2024/2284485/images/%E5%81%A5%E5%BA%B7%E7%9B%91%E6%B5%8B/u6739.png',
      time: '2022-05-21 10:20',
      status: 'success',
      statusText: '正常'
    }
  ]);
  
  const goBack = () => {
    window.history.back();
  };
  </script>
  
  <style scoped>
  .health-monitoring-container {
    background-color: #f5fff6;
    padding: 12px;
  }
  .user-info-card {
    margin-bottom: 16px;
  }
  .status-tag {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
  }
  .danger {
    background-color: #ffcccc;
    color: #e62e2e;
  }
  .success {
    background-color: #ccffcc;
    color: #28a745;
  }
  </style>